<template name="Interactivelist">
    <view class="interactivelist-item">
        <mescroll ref="mescrollRef" @init="mescrollInit" height="80%" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
            <!-- 评论 -->
            <block v-if="show==false">
                <view class="item-list" v-for="(item,inx) in getcommentList" :key='inx'>
                    <view class="item-list-Interactive">
                        <image :src="item.headimg" mode=""></image>
                    </view>
                    <view class="info-details">
                        <view class="list-center">
                            <view class="center-status">
                                <view class="status-text">{{item.nickname}}</view>
                                <view class="unread-icon" v-if="item.read_time==0">
                                    <image :src="staticImgUrl+'chat/unread.png'" mode=""></image>
                                </view>
                            </view>
                            <view class="center-time">{{item.format_time}}</view>
                        </view>
                        <view class="info-msg textoverflow">{{item.content}}</view>
                    </view>
                </view>
            </block>
            <!-- 互动 -->
            <block v-else>
                <view class="item-list" style="align-items: unset;" v-for="(item,inx) in getinteractList" :key='inx'>
                    <view class="item-list-Interactive">
                        <image :src="item.headimg" mode=""></image>
                    </view>
                    <view class="info-details">
                        <view class="list-center">
                            <view class="center-status">
                                <view class="status-text">{{item.nickname}}</view>
                                <view class="unread-icon" v-if="item.read_time==0">
                                    <image :src="staticImgUrl+'chat/unread.png'" mode=""></image>
                                </view>
                            </view>
                            <view class="center-time">{{item.format_time}}</view>
                        </view>
                        <view class="info-msg textoverflow">{{item.content}}</view>
                        <view class="info-msg-Two textoverflow">{{item.remark}}</view>
                    </view>
                </view>
            </block>
        </mescroll>
    </view>
</template>
<script>
import MescrollMixin from '@/components/mescroll/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/components/mescroll/mixins/mescroll-more-item.js'
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin],
	name: 'Interactivelist',
	data() {
		return {
			mescroll: null,
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: true, // 不自动加载
				noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: this.tipText || '~空空如也~' // 提示
				}
			},
			page: 1,
			pageTwo: 1,
			getcommentList: [],
			getinteractList: []
		}
	},
	// 属性
	props: {
		show: {
			// 返回事件判断显示
			type: Boolean,
			default: false
		},
		tipText: {
			type: String,
			default: ''
		}
	},
	created() {
		// if(this.show==false){
		// 	this.getcomment(1, 10)
		// }else{
		// 	this.getinteract(1, 10)
		// }
	},
	mounted() {

	},
	methods: {
		// 初始化
		mescrollInit(e) {
			this.mescroll = e
		},
		/* 下拉刷新的回调 */
		downCallback(e) {
			// this.mescroll.resetUpScroll();
			if (this.show == false) {
				this.getcomment(1, 20)
			} else {
				this.getinteract(1, 20)
			}
		},
		/* 上拉加载的回调 */
		upCallback(page) {
			console.log('logpage', page)
			// var page = this.page
			// page++
			if (this.show == false) {
				this.getcomment(page.num, 20)
			} else {
				this.getinteract(page.num, 20)
			}

		},
		getcomment(page, page_size) {
			this.$request.membertalkGetcomment({
				page,
				page_size
			}).then(res => {
				this.mescroll.endSuccess(res.data.list.length)
				if (res.data.list.length > 0) {
					if (page == 1) {
						this.getcommentList = res.data.list
						this.page = 1
					} else {
						this.getcommentList = this.getcommentList.concat(res.data.list)
						this.page = page
					}
				}
			}).catch(() => {
				this.mescroll.endErr()
			})
		},
		getinteract(page, page_size) {
			this.$request.membertalkGetinteract({
				page,
				page_size
			}).then(res => {
				console.log('getinteract', res)
				this.mescroll.endSuccess(res.data.list.length)
				if (res.data.list.length > 0) {
					if (page == 1) {
						this.getinteractList = res.data.list
						this.page = 1
					} else {
						this.getinteractList = this.getinteractList.concat(res.data.list)
						this.page = page
					}
				}
			}).catch(() => {
				this.mescroll.endErr()
			})
		}
	}
}
</script>
<style lang="scss" scoped>
body {
    background-color: #ffffff;
}

image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.textoverflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.interactivelist-item {
    width: 100%;
    padding-top: 10rpx;
    padding-bottom: 10rpx;

    .item-list {
        width: 702rpx;
        height: auto;
        background: rgba(244, 244, 244, 0);
        box-shadow: 0rpx 1rpx 0rpx 0rpx #f4f4f4;
        margin: 0 auto;
        display: flex;
        align-items: center;
        overflow: hidden;
        padding-top: 24rpx;
        padding-bottom: 24rpx;

        .item-list-Interactive {
            width: 72rpx;
            height: 72rpx;
            border-radius: 50%;
        }

        .info-details {
            padding-left: 16rpx;

            .info-msg {
                width: 593rpx;
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #999999;
            }

            .info-msg-Two {
                width: 593rpx;

                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #222222;
                padding-top: 22rpx;
            }

            .list-center {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .center-status {
                    display: flex;

                    .status-text {
                        font-size: 28rpx;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #222222;
                    }

                    .unread-icon {
                        width: 14rpx;
                        height: 14rpx;
                        margin-left: 10rpx;
                    }
                }

                .center-time {
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #999999;
                }
            }
        }
    }
}
</style>
